<template>
  <div>
    <div class="content" v-if="skuData[0]">
      <Row v-for="(item, index) in skuData" :key="index" style="margin-bottom: 10px;background-color: #fff;padding: 10px;">
        <i-col span="5">
          <span style="float: left;line-height: 100px;">SKU图片：</span>
          <div class="img">
            <img :src="item.img" alt="" width="100" height="100" style="display: block;"/>
          </div>
        </i-col>
        <i-col span="6" style="margin-top: 35px;">
          <span>SKU名称：</span>
          <Tag color="blue" v-show="!item.isChange">{{item.goodsSkuName}}</Tag>
          <Input v-model="item.goodsSkuName" v-show="item.isChange" style="width: 100px;"/>
        </i-col>
        <i-col span="6" style="margin-top: 35px;">
          <span>SKU权重：</span>
          <Tag color="green" v-show="!item.isChange">{{item.sortWeight}}</Tag>
          <InputNumber :min="0" :max="10" v-model="item.sortWeight" v-show="item.isChange"/>
        </i-col>
        <i-col span="3" offset="4">
          <div style="text-align: center;margin-top: 35px;" v-show="!item.isChange">
            <Button type="error" @click="deleteSkuData(index)">删除</Button>
            <Button type="primary" @click="changeSkuData(index)">修改</Button>
          </div>
          <div style="margin-top: 35px;" v-show="item.isChange">
            <Button type="primary" @click="finishChange(index)">完成</Button>
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sku-tab',
  data () {
    return {
      skuData: [],
      imgData: []
    }
  },
  methods: {
    getSkuData () {
      return this.skuData
    },
    changeData (data) {
      this.skuData = data
      this.skuData.sort((a, b) => {
        return b.sortWeight - a.sortWeight
      })
    },
    deleteSkuData (i) {
      this.skuData.splice(i, 1)
      this.$emit('deleteImg', i)
    },
    changeSkuData (i) {
      this.$set(this.skuData[i], 'isChange', true)
    },
    finishChange (i) {
      this.$set(this.skuData[i], 'isChange', false)
      this.skuData.sort((a, b) => {
        return b.sortWeight - a.sortWeight
      })
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
.img{
  float: left;
  border-radius: 6px;
  overflow: hidden;
}
  .content{
    background-color: #eee;
    padding: 10px 10px 1px;
    margin-bottom: 16px;
    font-size: 12px;
  }
</style>
